/* 
 * @ Author: ICT SOCIETY OF DHARMARAJA COLLEGE
 * Loading Screen Styles
 */

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- Crest Styles --- */
.loader-crest {
    width: 280px;
    height: auto;
    /* Runs for 3.5s, linear pacing, runs ONLY ONCE, stops at the final frame (forwards) */
    animation: crest-sequence 3.5s linear 1 forwards;
    opacity: 0; /* Starts hidden */
}

/* --- Text Styles --- */
.loader-text {
    position: absolute;
    bottom: 12%; 
    left: 50%;
    transform: translateX(-50%);
    width: 400px; 
    height: auto;
    /* Runs for 3.5s, runs ONLY ONCE, stops at the final frame (forwards) */
    animation: text-sequence 3.5s linear 1 forwards;
    opacity: 0; /* Starts hidden */
}

/* --- Crest Animation Sequence (Fade in -> Static -> Fade Out) --- */
@keyframes crest-sequence {
    0% {
        opacity: 0; /* Starts invisible */
    }
    15% {
        opacity: 1; /* Fade in complete */
    }
    85% {
        opacity: 1; /* Holds static */
    }
    100% {
        opacity: 0; /* Final Fade out */
    }
}

/* --- Text Animation Sequence (Left-to-Right Reveal -> Static -> Fade Out) --- */
@keyframes text-sequence {
    0% {
        opacity: 1;
        /* clip-path masks the image. 100% on the right means completely hidden */
        clip-path: inset(0 100% 0 0); 
    }
    25% {
        opacity: 1;
        /* 0% on all sides means fully revealed left-to-right */
        clip-path: inset(0 0 0 0); 
    }
    85% {
        opacity: 1; /* Holds static the entire time */
        clip-path: inset(0 0 0 0);
    }
    100% {
        opacity: 0; /* Final Fade out at the very end with the crest */
        clip-path: inset(0 0 0 0);
    }
}

/* --- Mobile Responsiveness --- */
@media screen and (max-width: 768px) {
    .loader-crest {
        width: 180px;
    }
    
    .loader-text {
        width: 250px;
        bottom: 10%;
    }
}